<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blogList.css">
    <link rel="stylesheet" href="css/load.css">

</head>
<body>
    <!--    导航栏-->
    <div class="nav">
        <img src="image/person_Blog.png" alt="">
        <span>我的博客系统</span>
        <div class="spacer">
            <a href="" id="exit">退出登录</a>
            <a href="main.html" id="main">主页</a>
            <a id="messageList">消息列表</a>
        </div>
        <a href="personMessage.html">修改信息</a>
        <a href="edit.html">写博客</a>
        <a href="#" id="logout">注销</a>
    </div>

    <!--    页面版心-->
    <div class="container">
        <!--        左侧个人信息-->
        <div class="left">
            <div class="card">
                <div id="loader" style="display: none">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <a href="upload.html"><img id="photo"></a>
                <button id="random">随机生成头像</button>
                <h3 id="username"></h3>
                <a href="#" id="github">github 地址</a>
                <div class="bottom">
                    <div class="counter" id="article">
                        <span>我的文章</span>
                        <span id="count"></span>
                    </div>
                    <div class="counter" id="fansList">
                        <span>粉丝</span>
                        <span id="fans"></span>
                    </div>
                </div>
            </div>
        </div>
        <!--        右侧内容-->
        <div class="right"></div>
    </div>


    <script src="jquery.js"></script>
<!--    得到当前用户的信息(左侧)   -->
    <script src="js/common.js"></script>
    <script>
        $.ajax({
            type: 'get',
            url: 'user',
            contentType: 'application/json',
            success: function (body) {
                getUserMessage(body);
                getUserBlogList(body.userId);
                getFansList(body.fans)
            }
        })
    </script>

<!--    获得当前主页所有的博客信息-->
    <script>
        let right = document.querySelector(".right");
        let search = document.createElement("div");
        search.className = 'search'
        // 搜索框
        let searchInput = document.createElement("input");
        searchInput.type = 'text'
        searchInput.placeholder = '请输入要查询的文章 ( 按Enter键查询 )'
        search.appendChild(searchInput);
        right.appendChild(search)
        $.ajax({
            type: 'get',
            url: 'blog'+'?get=all',
            contentType: "application/json",
            success: function (body) {
                for (let every of body){
                    let blog = document.createElement('div');
                    blog.className = 'blog';

                    let title = document.createElement('div');
                    title.innerHTML = every.title;
                    title.className = 'title';
                    let date = document.createElement('div');
                    date.innerHTML = every.postTime;
                    date.className = 'date';
                    let desc = document.createElement('div');
                    desc.innerHTML = every.desc;
                    desc.className = 'desc';
                    let a = document.createElement("a");
                    a.innerHTML =  '查看全文 &gt;&gt;';
                    a.href = 'blogDetail.html?blogId=' + every.blogId + "&authorId=" + every.userId;
                    // 挂载到上面
                    blog.appendChild(title);
                    blog.appendChild(date);
                    blog.appendChild(desc);
                    blog.appendChild(a);

                    right.appendChild(blog);
                }
            }
        })

        let random = document.querySelector("#random");
        random.onclick = function () {
            $.ajax({
                type: 'post',
                url: 'login' + "?random=yes",
                contentType: 'application/json',
                data: JSON.stringify({}),
                beforeSend: function(){
                    $("#loader").show();
                },
                success: function () {
                    location.reload()
                },
                complete: function () {
                    $("#loader").hide();
                }
            })
        }

        let logout = document.querySelector("#logout");
        logout.onclick = function () {
            var answer = confirm("确定要注销该用户吗?");
            if (answer == true){
                $.ajax({
                    type: 'get',
                    url: 'user'+'?logout=yes',
                    success: function (body) {
                        if (body == 'success'){
                            alert("注销成功!");
                            location = 'login.html'
                        }
                    }
                })
            }
        }

        let exit = document.querySelector("#exit");
        exit.onclick = function () {
            $.ajax({
                type: 'post',
                url: 'user'+'?exit=yes',
                dataType: 'text',
                success: function (body) {
                    if (body == 'success'){
                        location = 'login.html'
                    }
                }
            })
        }

        // 获取消息列表
        let messageList = document.querySelector("#messageList");
        messageList.onclick = function () {
            $.ajax({
                type: 'get',
                url: 'message'+"?list=yes",
                dataType: 'json',
                success: function (body) {
                    right.innerHTML = ''// 清空原有的
                    for (let every of body){
                        // 构造消息列表
                        let message = document.createElement('a');
                        message.href = 'chat.html'+'?authorId='+every.userId;
                        message.className = 'fan';

                        let img = document.createElement("img");
                        img.src = './image/' + every.photo + '.png';
                        img.className = 'img'

                        let username = document.createElement('span');
                        username.innerHTML = every.username;

                        message.appendChild(img);
                        message.appendChild(username);

                        console.log(message)
                        right.appendChild(message);
                    }
                }
            })
        }


        // 查询博客文章
        $('.search input').bind('keydown', function (e) {
            // enter键
            if(e.keyCode == 13){
                let content = document.querySelector(".search input")
                $.ajax({
                    type: 'get',
                    url: 'blog'+'?search='+encodeURIComponent(content.value),
                    contentType: 'application/json',
                    success: function (body) {
                        right.innerHTML = '';
                        if (body == null || body.length == 0){
                            right.innerHTML = '无查询内容';
                            right.style = 'color: white'
                        }
                        for (let every of body) {
                            let blog = document.createElement('div');
                            blog.className = 'blog';

                            let title = document.createElement('div');
                            title.innerHTML = every.title;
                            title.className = 'title';
                            let date = document.createElement('div');
                            date.innerHTML = every.postTime;
                            date.className = 'date';
                            let desc = document.createElement('div');
                            desc.innerHTML = every.desc;
                            desc.className = 'desc';
                            let a = document.createElement("a");
                            a.innerHTML =  '查看全文 &gt;&gt;';
                            a.href = 'blogDetail.html?blogId=' + every.blogId + "&authorId=" + every.userId;
                            // 挂载到上面
                            blog.appendChild(title);
                            blog.appendChild(date);
                            blog.appendChild(desc);
                            blog.appendChild(a);

                            right.appendChild(blog);
                        }
                    }
                })
            }
        })
    </script>
</body>
</html>